<template>
  <div>
    <el-form>
      <el-form-item>
        <el-select v-model="flag" placeholder="类型" style="width: 90px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          placeholder="请输入查询内容"
          v-model="findInput"
          style="width:200px; margin-left:10px;"/>
        <el-button type="primary" style="margin-left: 10px" @click="findFactoryItem(flag,findInput)">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button style="margin-left: 10px" @click="resetFind()">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableList"
      border
      style="width: 100%; margin-top: 20px"
      v-loading="loading"
    >
      <el-table-column prop="factoryId" label="编号" min-width="120" height="30" align="center">
      </el-table-column>

      <el-table-column prop="factoryName" label="厂名" min-width="230" align="center">
      </el-table-column>

      <el-table-column prop="personName" label="负责人姓名" min-width="120" align="center">
      </el-table-column>

      <el-table-column prop="tel" label="电话" min-width="140" align="center">
      </el-table-column>

      <el-table-column prop="address" label="地址" align="center" min-width="300">
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="100" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="decision(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20,25]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
    />
  </div>
</template>

<script setup>
import {ref, onMounted,defineEmits} from "vue";
import {findFactory, getFactoryList} from "@/api/factory";
import {ElMessage} from "element-plus";


const options = [
  {
    label: '编号',
    value: 'factoryId'
  }, {
    label: '厂名',
    value: 'factoryName'
  }
  , {
    label: '姓名',
    value: 'personName'
  }
  , {
    label: '电话',
    value: 'tel'
  }
  , {
    label: '地址',
    value: 'address'
  }
]
const currentPage = ref(1) //当前页 刷新后默认显示第一
const pageSize = ref(5)//每一页显示的数据量 此处每页显示6条数据
const total = ref(0)
const findInput = ref(null)
const flag = ref('factoryId')
const tableList = ref([])
const loading = ref(false)
const emit = defineEmits(['func'])

onMounted(() =>{
  showFactory();
})

function showFactory() {
  loading.value = true
  getFactoryList(currentPage.value,pageSize.value).then(res => {
    tableList.value = res.data.records;
    total.value = res.data.total
    loading.value = false
  }).catch(() => {
    loading.value = false
    ElMessage.error("系统错误");
  })
}
function handleCurrentChange() {
  showFactory()
}
function handleSizeChange() {
  showFactory()
}
function decision(data) {
  emit('func', data)
}
function findFactoryItem(flag, data) {
  findFactory(flag, data.trim(),currentPage.value, pageSize.value).then(res => {
    tableList.value = res.data.records;
    total.value = res.data.total
  }).catch(err => {
    ElMessage.warning('查找失败')
  })
}
function resetFind() {
  findInput.value = null;
  showFactory();
}
</script>

<style scoped>
.pagination{
  padding: 20px 0;
  margin-left:55%;
  transform: translate(-50%,0);
}
</style>
